import React, { Component } from 'react'
import { Steps, WingBlank, WhiteSpace,Toast} from 'antd-mobile';
import './register.scss'
import axios from 'axios'
import {connect} from 'react-redux'
const Step = Steps.Step;

const steps = [{
  title: '填写账号密码',
}, {
  title: '验证手机号码',
}, {
  title: '完成注册',
}].map((s, i) => <Step key={i} title={s.title} />);

function showToast(value) {
  Toast.info(value, 1);
}

let g = /(^[a-zA-Z]([a-zA-Z0-9]{5,15})$)/
let tel=/^(1[3-9])([0-9]{9})$/

 class Register extends Component {
  constructor(){
    super()
    this.state={
      id:0,
      style:false,
      password:'',
      checkedValue:false,
      time:16,
      time1:15,
      showTime:false,
      code:'',
      showCode:false,
      codeValue:'123',
      poptel:'',
      axiosCode:0
    }
  }
  
  
  render() {
    const module = this.changeModule(this.state.id)
    return (
      <div className='Register'>
        <WingBlank mode={20} className="stepsExample">
          <WhiteSpace />
          <Steps current={this.state.id} direction="horizontal" size="small">{steps}</Steps>
          <WhiteSpace />
        </WingBlank>
        {module}
      </div>
    )
  }

  changeModule= (id)=>{
    if(id ===0){
      return <div className='userRegister'>
        <div className='border-bottom inputBox'><input
        placeholder='以首为字母的6位数账户'
        value={this.props.username}
        onChange={(e) =>{this.props.changeUser(e.target.value)}}/><span className={`iconfont ${this.props.username === ''? '':'icon-cha'}`}  onClick={() =>{this.props.changeUser('')}}/>
        </div>
        <div className='border-bottom inputBox'>
          <input
          placeholder='请输入6-16位密码'
          type={this.state.style=== false ? 'password':'text'}
          value={this.state.password}
          onChange={(e) =>{this.setState({password:e.target.value})}}
          />
          <span className={`iconfont ${this.state.password === ''? '':'icon-cha'}`}  onClick={() =>{this.setState({password:''})}}/>
          <span  className={`iconfont ${this.state.style === true? 'icon-yanjing' :'icon-biyan'}  ${this.state.password ===''?'showSpan':'showSpan1'}`} 
            onClick={() =>{this.setState({style:!this.state.style})}}/>
        </div>
        <div className='checkBox1'><input type='checkbox' checked={this.state.checkedValue} onChange={() =>{this.setState({checkedValue:!this.state.checkedValue})}}/>是否同意《网易服务条款》和《网易隐私政策》</div>
        <div onClick={() =>{
          if(this.props.username.length <4 ||this.state.password.length <6 || this.state.password.length>16 || !g.test(this.props.username)){
            showToast('账号或密码不对')
            return
          }else if(!this.state.checkedValue){
            showToast('不同意条款不给注册')
            return
          }
          this.setState({id:1})
          }} 
          className='userButton'
          >下一步</div>
        </div>
    }else if(id === 1){
        return <div  className='userRegister2'>
            <div className='border-bottom userRegisterBox2'><input placeholder='请输入手机号'
            value={this.props.telValue}
            onChange={(e) =>{this.props.changeTel(e.target.value)}}
            onBlur={(e) =>{ 
              if(!tel.test(e.target.value)){
                showToast('手机号不正确')
              this.setState({
                showCode:false
              })
              return
            }else{
              this.setState({
                showCode:true
              })
            }
          }}
            /></div>
            <div className='border-bottom userRegisterBox2'>
              <input placeholder='输入短信验证码'
              className='userRegister2input'
              value={this.state.code}
              onChange={(e) =>{this.setState({code:e.target.value})}}
              />
              {this.state.time === 16? <span
              onClick={this.setInt} className='timeStlye'>发送验证码</span>
              :<span className='timeStlye'>{this.state.time}秒</span>}
              </div>
            <div className='zhenRegister' onClick={this.setInt2}>注册</div>
        </div>
      }else if(id ===2){
        return <div className='userRegister3'>
          <p>距离{this.state.time1}秒跳转登录页面</p>
          <p className='pp2' onClick={() =>{this.props.history.push('/login')}}><span onClick={() =>{this.props.history.push('/login')}}>立即跳转</span></p>
        </div>
      }
    }

    setInt =()=>{
      if(!this.state.showTime && this.state.showCode){
        this.setState({
          time:15
        })
        this.timeIn1 =  setInterval(()=>{
          this.setState({
            time:this.state.time-1
          })
          if(this.state.time <= 0){
            this.setState({
              time:16,
              showTime:false
            })
            clearTimeout(this.timeIn1)
          }
        },1000)
        this.setState({
          showTime:true,
          poptel:this.props.telValue
        })
        return
      }
      showToast('请输入正确手机号')
  }
  setInt2= ()=>{
    if(this.state.code === '' || this.props.telValue === ''){
      showToast('手机号或验证码不能为空')
      return
    }else if(this.state.code === this.state.codeValue && this.props.telValue === this.state.poptel){
      axios.post('http://10.36.149.139:9000/api/user/regiester',{
        username:this.props.username,
        password:this.state.password,
        tel:this.state.poptel
      }).then(({data}) =>{
        if(data.code === -1){
          this.setState({
            axiosCode: data.code
          })
          showToast(data.message)
          return
        }
        this.setState({
          axiosCode: data.code,
          id:2
      })
    if(this.state.axiosCode === 0){
        this.timeIn =  setInterval(()=>{
          this.setState({
            time1:this.state.time1-1
          })
          if(this.state.time1 <= 0){
            this.setState({
              time1:15,
            })
            this.props.history.push('/login')
            clearTimeout(this.timeIn)
          }
        },1000)
      }
    })
      return
    }
    showToast('验证码不正确或修改过手机号')
  }

  componentWillUnmount(){
    clearTimeout(this.timeIn)
    clearTimeout(this.timeIn1)
  }
}

const mapStoreToProps=(state) =>{
  return{
    telValue:state.getIn(['userReducer','userInfo','telValue']),
    username:state.getIn(['userReducer','userInfo','userName'])
  }
}

const mapActionToProps=(dispatch)=>{
  return{
    changeTel(value){
      dispatch({
        type:'changeTel',
        value
      })
    },
    changeUser(value){
      dispatch({
        type:'changeUser',
        value
      })
    }
  }
}

export default connect(mapStoreToProps,mapActionToProps)(Register)